<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; padding-top: 10px; margin-bottom: 9px">
      <el-col :span="1">
        <el-button type="text" @click="goback"><i class="el-icon-back" style="color: white;font-size: xx-large"></i></el-button>
      </el-col>
      <el-col :span="3">
        <h2 style="margin-top: 12px;margin-left: -25px">新增一次系统图</h2>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between" :gutter="20">
      <el-col :span="18">
        <el-form :inline="true" :model="editedFarm" class="demo-form-inline">
          <el-col :span="24">
            <el-form-item label="风场：" required>
              <el-select
                v-model="editedFarm.farmName"
                filterable
                allow-create
                placeholder="———请选择/输入———">
                <el-option :label="farm.name" :value="farm.name" v-for="farm in leftFarms" :key="farm.id"></el-option>
                <!--              <el-option label="五兔山风电场" value="one"></el-option>-->
                <!--              <el-option label="灯角楼风电场" value="two"></el-option>-->
                <!--              <el-option label="外罗二期风电场" value="three"></el-option>-->
                <!--              <el-option label="新寮海上风电场" value="four"></el-option>-->
              </el-select>
            </el-form-item>
            <el-form-item label="陆上/海上：" required>
              <el-select v-model="editedFarm.type" placeholder="————请选择————">
                <el-option label="陆上风电场" value="1"></el-option>
                <el-option label="海上风电场" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="风场图" required>
              <el-upload
                class="upload-demo"
                :auto-upload=false
                action=""
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="fileChange"
                list-type="picture"
                :limit="1">
                <el-button class="el-blue-button" size="small" type="primary">点击上传</el-button>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <el-col :span="24">
                <el-form-item>
                  <el-button class="el-blue-button" type="primary" @click="addFarm()">提交</el-button>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
<!--    <el-row type="flex" justify="space-between" :gutter="20">-->
<!--      <el-form :inline="true" :model="editedFarm" class="demo-form-inline">-->

<!--      </el-form>-->
<!--    </el-row>-->
  </div>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'addFarm',
  data () {
    return {
      editedFarm: {
        farmName: '',
        type: '',
        pic: []
      },
      dialogImageUrl: '',
      dialogVisible: false,
      leftFarms: []
    }
  },
  inject: ['reload'],
  created () {
    request({
      method: 'post',
      url: '/bulletin/getleftplants',
      params: {
      }
    }).then(res => {
      // console.log(res)
      // console.log(res.data.data)
      this.leftFarms = res.data.data
      // console.log(this.leftFarms)
    }).catch((error) => {
      console.log(error)// 异常
    })
  },
  methods: {
    addFarm () {
      const fd = new FormData()
      fd.append('name', this.editedFarm.farmName)
      fd.append('type', this.editedFarm.type)
      // if (typeof (this.editedFarm.pic.raw) === 'undefined') {
      //   console.log('没图')
      //   fd.append('pic', '')
      // } else {
      //   console.log('有图')
      //   fd.append('pic', this.editedFarm.pic.raw)
      //   console.log(typeof (this.editedFarm.pic.raw))
      // }
      this.editedFarm.pic.forEach(item => {
        fd.append('pic', item.raw)
      })
      console.log('editedFarm.pic')
      console.log(this.editedFarm.pic)
      request({
        method: 'post',
        url: '/bulletin/addshowcase',
        data: fd
      }).then(res => {
        if (res.data.message === 'SUCCESS') {
          this.$confirm('是否继续添加新风场？', '添加成功', {
            distinguishCancelAndClose: true,
            confirmButtonText: '继续添加',
            cancelButtonText: '放弃并返回'
          })
            .then(() => {
              this.reload()
              // this.$message({
              //   type: 'info',
              //   message: '继续添加'
              // })
            })
            .catch(action => {
              if (action === 'cancel') {
                this.$router.back(-1)
              }
            })
        }
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    fileChange (file, fileList) {
      this.editedFarm.pic = fileList
      // console.log(this.editedFarm.pic)
    },
    handleRemove (file) {
      console.log(file)
    },
    handlePreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    goback: function () {
      console.log('huitui')
      this.$router.back(-1)
    }
  }
}
</script>

<style scoped>

</style>
